import * as echarts from 'echarts'

/**
 * 正负堆叠柱状图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useBarEchartsHandler = (el, params) => {
  const myChart = echarts.init(el)
  const option = {
    legend: {
      type: 'scroll',
      textStyle: { //图例文字的样式
        color: '#fff',
      }
    },
    title: {
      text: params.title || ''
    },
    tooltip: {
      trigger: 'axis',
      className: 'tooltipBox',
      textStyle: {
        color: 'white' // 设置字体颜色为白色  
      },
      formatter: function (paramsValue) {
        let result = paramsValue[0].name + '<br>'
        for (let i = 0; i < paramsValue.length; i++) {
          result += paramsValue[i].marker + ' ' + paramsValue[i].seriesName + ': ' + Math.abs(paramsValue[i].value) + '<br>'
        }
        return result
      }
    },
    xAxis: {
      type: 'category',
      data: params.xAxisData,
      axisLabel: {
        // 确保所有标签都显示  
        interval: 0,
        // 可以旋转标签以避免重叠  
        rotate: 45,
        textStyle: {
          fontSize: 10,
          color: '#fff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      top: '15%',
      bottom: '2%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value) {
          // 将负数转换为正数显示在 Y 轴上
          return Math.abs(value);
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
        }
      }
    },
    color: params.color,
    series: params.seriesData
  }
  option && myChart.setOption(option)
}
